<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <template>
        <div
          class="swiper-slide"
          v-for="(item, index) in data"
          :key="item.time"
          @click="emit(item.timeDesc, index)"
        > 
        <div class="tool" :class="active == index ? 'active' : ''">
          <span>{{
            item.timeDesc
          }}</span>
          <span v-if="item.time > nowDate" >即将开始</span>
          <span v-else-if="item.time < nowDate" >已开抢</span>
          <span v-else-if="item.time = nowDate" >正在疯抢</span>
        </div>
          
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/swiper-bundle.css";
let swiperObj = Symbol()
export default {
  data() {
    return {
      [swiperObj]: null,
      nowDate: "",
      active: 0,
    };
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  methods: {
    emit(item, index) {
      this.active = index;
      this.$event.$emit("sumPage", item, index);
    },
  },
  mounted() {
    let date = new Date()
    console.log(date.getTime())
    const dTime = 8*60*60*1000
    this.nowDate = date.getTime()
    this.$nextTick(() => {
      this[swiperObj] = new Swiper(".swiper-container", {
        slidesPerView: 4, 
        spaceBetween: 30,
        // observer: true, //修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true, //修改swiper的父元素时，自动初始化swiper
      });
    });
  },
};
</script>

<style lang="scss" scoped>
.tool {
  margin-bottom: 10px;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 20px;
  border-radius: 30px;
  width: 76px;
  height: 40px;
  background: #f8f8f8;
  line-height: 40px;
  align-items: center;
  span{
  display: inline-block;
  width: 70px;
  font-size: 15px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #777;
  }


}
.active {
  background: tomato;
}
</style>